<template>
  <div class="role-page">
    <div class="com-action-table-btn">
      <Button type="primary" @click="createGroup(1)">新增分组</Button>
      <BtnPlain type="primary" @click="createGroup(2)"
        >新增{{ $props.roleType == "Role" ? "角色" : "权限" }}</BtnPlain
      >
    </div>
    <Table row-key="id" :columns="columns" :data="listData">
      <template slot-scope="{ row }" slot="action">
        <BtnText type="primary" @BtnClick="createGroup(2, row)"
          >新增{{ $props.roleType == "Role" ? "角色" : "权限" }}</BtnText
        >
        <BtnText type="primary" @BtnClick="createGroup(4, row)">编辑</BtnText>
        <BtnText type="error" @BtnClick="createGroup(3, row)">删除</BtnText>
      </template>
    </Table>
    <!-- <PageAtion
      v-if="total"
      :total="total"
      :size.sync="formData.size"
      :page.sync="formData.page"
      @pageSizeChange="pageSizeChange"
    /> -->
    <RoleGroup
      v-if="isHide && $props.roleType == 'Role'"
      :isHide="isHide"
      :updateIsHide.sync="isHide"
      :echoData="echoData"
      :titleName="titleName"
      :types="types"
      :groupList="listData"
      @actionSuccess="actionSuccess"
    />
    <Permission
      v-if="isHide && $props.roleType == 'Auth'"
      :isHide="isHide"
      :updateIsHide.sync="isHide"
      :echoData="echoData"
      :titleName="titleName"
      :types="types"
      :groupList="listData"
      @actionSuccess="actionSuccess"
    />
  </div>
</template>

<script type="text/javascript">
import RoleGroup from "./roleGroup.vue";
import Permission from "./permission.vue";
import RoleGroupTable from "./roleGroupTable.vue";
import PermissionTable from "./permissionTable.vue";

import {
  getGoupList, // 获取分组列表
  detaleGroup, // 删除分组
} from "@/api/system";

export default {
  name: "rolePage",
  components: {
    RoleGroup,
    Permission,
    RoleGroupTable,
  },
  props: {
    roleType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      formData: {
        input: "",
        page: 1,
        size: 10,
      },
      isHide: false,
      echoData: {},
      columns: [
        {
          type: "expand",
          width: 50,
          render: (h, params) => {
            return h(
              this.$props.roleType == "Role" ? RoleGroupTable : PermissionTable,
              {
                props: {
                  row: params.row,
                },
              }
            );
          },
        },
        {
          title: "角色组名称",
          key: "groupName",
          tree: true,
        },
        {
          title: "最后修改时间",
          key: "updateDateTime",
        },
        {
          title: "操作人",
          key: "updateUserName",
        },
        {
          title: "操作",
          slot: "action",
          width: 200,
          align: "center",
        },
      ],
      listData: [],
      total: 10,
      titleName: "",
      types: "1",
    };
  },
  methods: {
    pageSizeChange(row) {
      console.log(row, "pageSizeChange", this.formData);
    },
    actionSuccess() {
      this.getGoupListData();
    },
    createGroup(types, row) {
      this.echoData = {};
      if (types == 1) {
        this.types = "1";
        this.titleName = "新增分组";
      }
      if (types == 2) {
        this.types = "2";
        this.titleName =
          this.$props.roleType == "Role" ? "新增角色" : "新增权限";
      }
      if (types == 3) {
        this.$Modal.confirm({
          title: "删除分组",
          content: "<p>删除后无法恢复，确认删除吗？</p>",
          loading: true,
          onOk: async () => {
            let params = {
              permissionGroupId: row.permissionGroupId,
            };
            let data = await detaleGroup(params);
            this.$Modal.remove();
            this.$Message.success("删除成功！");
            this.getGoupListData();
          },
        });
        return;
      }
      if (types == 4) {
        this.types = "1";
        this.echoData = row;
        this.titleName = "编辑分组";
      }
      this.isHide = true;
    },
    checkTabs(ev) {
      this.columns[1].title =
        ev == "Role" ? "角色组分类名称" : "权限组分类名称";
      // this.listData = [];
      this.getGoupListData();
    },
    // 获取角色/权限组
    async getGoupListData() {
      let params = {
        groupName: "",
        groupType: this.$props.roleType,
      };
      let data = await getGoupList(params);
      console.log(data, "data");
      this.listData = data;
    },
  },
  mounted() {
    this.getGoupListData();
  },
};
</script>

<style lang="less" scoped></style>
